<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex; width: 250px; height: 600px; background: #666; margin-bottom: 20px; flex-wrap: wrap;}
	.flex-box .flex-item{ width: 100px; background: blue; color: #FFF;}
	.flex-box .flex-item1{ height: 90px;}
	.flex-box .flex-item2{ height: 120px;}
	.flex-box .flex-item3{ height: 50px;}
	.flex-box .flex-item4{ height: 100px;}
	.flex-box .flex-item5{ height: 170px;}
	.flex-box .flex-item6{ height: 70px;}
	</style>
	<style type="text/css">
	.flex-box1{ align-content: stretch;}
	.flex-box2{ align-content: flex-start;}
	.flex-box3{ align-content: flex-end;}
	.flex-box4{ align-content: center;}
	.flex-box5{ align-content: space-between;}
	.flex-box6{ align-content: space-around;}
	.flex-box7{ align-content: space-evenly;}
	</style>
</head>
<body>
	<div>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用(即多行时才起作用)</div>
	<div>stretch（默认值）：轴线占满整个交叉轴</div>
	<div class="flex-box flex-box1">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	<div class="flex-box flex-box2">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	<div class="flex-box flex-box3">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	<div class="flex-box flex-box4">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	<div class="flex-box flex-box5">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	<div class="flex-box flex-box6">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	<div class="flex-box flex-box7">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
		<div class="flex-item flex-item5">e5</div>
		<div class="flex-item flex-item6">f6</div>
	</div>
	
</body>
</html>